Notifications

Overview

The Notifications UI component in Emvi UI manages contextual and persistent user communication by grouping multiple events into a single, structured view. Unlike alerts or toasts, notifications are often displayed in side panels, modals, or dropdowns, offering more room for text, actions, and organization.

Notifications are particularly useful in SaaS apps, e-commerce, or collaborative platforms, where users need to quickly access updates related to their account, activity, or reminders.

Structure and Anatomy

Each notification includes:

- Header (e.g., "New message", "System update")
- Body text describing the event
- Contextual icon indicating type (success, error, warning, info)
- Quick actions such as buttons ("view more", "dismiss", "reply")
- Optional timestamp for chronological context

Notification Variants

- Contextual: displayed in dropdowns or side panels
- Persistent: remain visible until dismissed by the user
- Interactive: include quick-action buttons or links
- Grouped: multiple notifications shown within a tray or panel

Accessibility and Responsiveness

- Semantic roles like role="status" or role="alert"
- WCAG AA contrast compliance
- Full keyboard navigation (Tab, Enter, Esc)
- On mobile, notification panels adapt to full-screen overlays

Integration

In Figma, notifications ship as modular components with style variants (light/dark, type, with/without icons, with/without actions).

In Tailwind CSS, they are implemented using utilities like flex, items-start, gap-x-*, bg-*, shadow-md, rounded-lg, and animate-in/out.